<template>
  <el-row>
    <el-col :span="12">
      <button @click="fn1">切换第一个系列</button>
      <button>切换第二个系列</button>
      <div ref="chart1" class="chart1"></div>
    </el-col>
    <el-col :span="12">
      <div id="amap"></div>
    </el-col>
    <el-col :span="12">
      <baidu-map
        class="map"
        scroll-wheel-zoom
        :center="{ lng: 117.3, lat: 31.82 }"
        :zoom="15"
      >
        <bm-marker
          :position="{ lng: 117.3, lat: 31.82 }"
          :dragging="true"
          animation="BMAP_ANIMATION_BOUNCE"
        >
          <bm-label
            content="我爱北京天安门"
            :labelStyle="{ color: 'red', fontSize: '24px' }"
            :offset="{ width: -35, height: 30 }"
          />
        </bm-marker>
      </baidu-map>
    </el-col>
    <el-col :span="12"> </el-col>
  </el-row>
</template>

<script>
export default {
  name: "DashBoard",
  data() {
    return {
      myChart: null,
      data: [
        {
          type: "袜子",
          sale: 10,
          profit: 20,
        },
        {
          type: "裙子",
          sale: 15,
          profit: 23,
        },
        {
          type: "裤子",
          sale: 34,
          profit: 21,
        },
        {
          type: "鞋子",
          sale: 33,
          profit: 44,
        },
      ],
      map: null,
    };
  },
  methods: {
    fn1() {
      this.myChart.dispatchAction({
        type: "legendToggleSelect",
        name: "销量",
      });
    },
    initChart1() {
      const myChart = this.$echarts.init(this.$refs.chart1);

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: "{title|这是主标题}",
          textStyle: {
            color: "red",
            rich: {
              title: {
                width: 50,
                height: 50,
                backgroundColor: {
                  image:
                    "https://img2.baidu.com/it/u=1161485666,473333105&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
                },
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          // formatter: "{a0} {b0}: {c0} 件 <br/> {a1} {b1}: {c1} 元",
          formatter: (params) => {
            // 返回 html标签
            return `
              <div class="tool-container">
                  <div class="tool-item1">
                    <h3>${params[0].seriesName}:</h3>
                    <p>${params[0].name}: ${params[0].value.sale}件</p>
                  </div>

                  <div class="tool-item2">
                    <h3>${params[1].seriesName}:</h3>
                    <p>${params[1].name}: ${params[1].value.profit}元</p>
                  </div>
              </div>
            `;
          },
        },
        legend: {
          formatter: "{name}-xxxx",
          data: [
            {
              name: "销量",
              icon:
                "image://https://img2.baidu.com/it/u=727155113,1475698474&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            },
            {
              name: "利润额",
              icon:
                "image://https://img2.baidu.com/it/u=727155113,1475698474&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            },
          ],
        },
        xAxis: {
          name: "这是x轴",
          type: "category",
          nameRotate: 45,
          // inverse: true,
          // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          axisLine: {
            lineStyle: {
              color: "red",
            },
          },
          axisTick: {
            lineStyle: {
              color: "blue",
            },
          },
          axisLabel: {
            color: "purple",
            rotate: 45,
            margin: 30,
            /* formatter: "{value}- {a|a的内容}",
            rich: {
              a: {
                color: "red",
              },
            }, */
          },
        },
        yAxis: {
          // min: 3,
          // max: 99,
          // splitNumber: 7,
        },
        dataZoom: [
          {
            type: "inside",
          },
          {
            type: "slider",
          },
        ],
        /*  visualMap: [
          {
            type: "continuous",
            min: 0,
            max: 50,
            range: [0, 50],
            calculable: true,
          },
        ], */
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: {
              readOnly: false,
            },
            magicType: {
              type: ["line", "bar"],
            },
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            name: "销量",
            type: "bar",
            // data: [5, 20, 36, 10, 10, 20],
          },
          {
            name: "利润额",
            type: "line",
            smooth: true,

            symbol: "rect",
            // data: [15, 25, 35, 15, 15, 25],
          },
        ],
        color: ["#ac3311", "#a733f1"],
        // backgroundColor: "#dc4444",
        // 数据集管理数据
        dataset: {
          dimensions: ["type", "sale", "profit"],
          source: this.data,
        },
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      this.myChart = myChart;
    },
    initAmap() {
      // 初始化高德地图
      AMapLoader.load({
        key: "4b14b486bd136bb267cbdbb886cdec54", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      }).then((AMap) => {
        // 初始化高德地图  AMap
        const map = new AMap.Map("amap", {
          viewMode: "2D", // 默认使用 2D 模式
          zoom: 15, //初始化地图层级
          center: [117.3, 31.8], //初始化地图中心点
        });

        // ps 画图
        // 创建 Marker
        const icon = new AMap.Icon({
          size: new AMap.Size(40, 50), // 图标尺寸
          image:
            "https://img1.baidu.com/it/u=2651179908,586141296&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", // Icon的图像

          imageSize: new AMap.Size(40, 50), // 根据所设置的大小拉伸或压缩图片
        });
        const marker = new AMap.Marker({
          position: new AMap.LngLat(117.3, 31.8), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: "合肥",
          label: {
            content: "大爷来玩啊",
          },
          icon,
        });

        map.add(marker);

        // 演示插件
        AMap.plugin(["AMap.PlaceSearch", "AMap.Driving"], () => {
          var placeSearch = new AMap.PlaceSearch({
            // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
            city: "合肥",
          });
          placeSearch.search("spa", (status, res) => {
            // console.log(status, res);
          });
          // 使用 路线规划插件
          var driving = new AMap.Driving({
            // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
            policy: AMap.DrivingPolicy.LEAST_TIME,
          });

          var startLngLat = [116.379028, 39.865042];
          var endLngLat = [116.427281, 39.903719];

          driving.search(startLngLat, endLngLat, function (status, result) {
            // 未出错时，result即是对应的路线规划方案
            console.log(status, result);
          });
        });
        this.map = map;
      });
    },
  },

  mounted() {
    this.initChart1();
    this.initAmap();
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });

    this.myChart.on("click", (e) => {
      console.log(e);
    });
  },
};
</script>

<style lang="scss" scoped>
.chart1 {
  height: 600px;
}
:deep .tool-container {
  background-color: pink;
}
#amap {
  height: 600px;
}
.map {
  height: 600px;
}
</style>
